રિએક્ટ પોર્ટલ્સ: ઉન્નત UX માટે મોડલ્સ અને ટૂલટિપ્સમાં નિપુણતા

આધુનિક વેબ ડેવલપમેન્ટમાં, સાહજિક અને આકર્ષક યુઝર ઇન્ટરફેસ બનાવવું સર્વોપરી છે. રિએક્ટ, જે યુઝર ઇન્ટરફેસ બનાવવા માટે એક લોકપ્રિય જાવાસ્ક્રીપ્ટ લાઇબ્રેરી છે, તે આ સિદ્ધ કરવા માટે વિવિધ સાધનો અને તકનીકો પ્રદાન કરે છે. આવું જ એક શક્તિશાળી સાધન છે રિએક્ટ પોર્ટલ્સ. આ બ્લોગ પોસ્ટ રિએક્ટ પોર્ટલ્સની દુનિયામાં ઊંડાણપૂર્વક જાય છે, જે સુલભ અને દૃષ્ટિની આકર્ષક મોડલ્સ અને ટૂલટિપ્સ બનાવવામાં તેમના ઉપયોગ પર ધ્યાન કેન્દ્રિત કરે છે.

રિએક્ટ પોર્ટલ્સ શું છે?

રિએક્ટ પોર્ટલ્સ કમ્પોનન્ટના ચિલ્ડ્રનને એવા DOM નોડમાં રેન્ડર કરવાની રીત પ્રદાન કરે છે જે પેરેન્ટ કમ્પોનન્ટના DOM હાયરાર્કીની બહાર અસ્તિત્વ ધરાવે છે. સરળ શબ્દોમાં કહીએ તો, તે તમને સ્ટાન્ડર્ડ રિએક્ટ કમ્પોનન્ટ ટ્રીમાંથી મુક્ત થવા અને HTML સ્ટ્રક્ચરના બીજા ભાગમાં સીધા એલિમેન્ટ્સ દાખલ કરવાની મંજૂરી આપે છે. આ ખાસ કરીને એવી પરિસ્થિતિઓ માટે ઉપયોગી છે જ્યાં તમારે સ્ટેકીંગ કોન્ટેક્સ્ટને નિયંત્રિત કરવાની અથવા એલિમેન્ટ્સને તેમના પેરેન્ટ કન્ટેનરની સીમાઓની બહાર સ્થાન આપવાની જરૂર હોય છે.

પરંપરાગત રીતે, રિએક્ટ કમ્પોનન્ટ્સ DOM ની અંદર તેમના પેરેન્ટ કમ્પોનન્ટ્સના ચિલ્ડ્રન તરીકે રેન્ડર થાય છે. આ ક્યારેક સ્ટાઇલિંગ અને લેઆઉટની પડકારો તરફ દોરી શકે છે, ખાસ કરીને જ્યારે મોડલ્સ અથવા ટૂલટિપ્સ જેવા એલિમેન્ટ્સ સાથે કામ કરતી વખતે જેને અન્ય સામગ્રીની ઉપર દેખાડવાની જરૂર હોય છે અથવા વ્યૂપોર્ટની સાપેક્ષમાં સ્થાન આપવાની જરૂર હોય છે. રિએક્ટ પોર્ટલ્સ આ એલિમેન્ટ્સને DOM ટ્રીના બીજા ભાગમાં સીધા રેન્ડર કરવાની મંજૂરી આપીને આ મર્યાદાઓને દૂર કરીને એક ઉકેલ પૂરો પાડે છે.

રિએક્ટ પોર્ટલ્સનો ઉપયોગ શા માટે કરવો?

કેટલાક મુખ્ય ફાયદાઓ રિએક્ટ પોર્ટલ્સને તમારા રિએક્ટ ડેવલપમેન્ટ શસ્ત્રાગારમાં એક મૂલ્યવાન સાધન બનાવે છે:

• સુધારેલ સ્ટાઇલિંગ અને લેઆઉટ: પોર્ટલ્સ તમને એલિમેન્ટ્સને તેમના પેરેન્ટના કન્ટેનરની બહાર સ્થાન આપવાની મંજૂરી આપે છે, જે overflow: hidden, z-index મર્યાદાઓ, અથવા જટિલ લેઆઉટ અવરોધોને કારણે થતી સ્ટાઇલિંગ સમસ્યાઓને દૂર કરે છે. એક મોડલની કલ્પના કરો કે જેને આખી સ્ક્રીનને આવરી લેવાની જરૂર છે, ભલે તેના પેરેન્ટ કન્ટેનરમાં overflow: hidden સેટ કરેલ હોય. પોર્ટલ્સ તમને મોડલને સીધું body માં રેન્ડર કરવાની મંજૂરી આપે છે, આ મર્યાદાને બાયપાસ કરીને.
• ઉન્નત એક્સેસિબિલિટી: પોર્ટલ્સ એક્સેસિબિલિટી માટે નિર્ણાયક છે, ખાસ કરીને મોડલ્સ સાથે કામ કરતી વખતે. મોડલ સામગ્રીને સીધી body માં રેન્ડર કરવાથી તમે ફોકસ ટ્રેપિંગને સરળતાથી મેનેજ કરી શકો છો, ખાતરી કરો કે સ્ક્રીન રીડર્સ અથવા કીબોર્ડ નેવિગેશનનો ઉપયોગ કરતા વપરાશકર્તાઓ મોડલ ખુલ્લું હોય ત્યારે તેની અંદર જ રહે. આ એક સીમલેસ અને સુલભ વપરાશકર્તા અનુભવ પ્રદાન કરવા માટે જરૂરી છે.
• વધુ સ્વચ્છ કમ્પોનન્ટ સ્ટ્રક્ચર: મોડલ અથવા ટૂલટિપ સામગ્રીને મુખ્ય કમ્પોનન્ટ ટ્રીની બહાર રેન્ડર કરીને, તમે તમારા કમ્પોનન્ટ સ્ટ્રક્ચરને વધુ સ્વચ્છ અને વધુ વ્યવસ્થિત રાખી શકો છો. આ જવાબદારીઓનું વિભાજન તમારા કોડને વાંચવા, સમજવા અને જાળવવા માટે સરળ બનાવી શકે છે.
• સ્ટેકીંગ કોન્ટેક્સ્ટ સમસ્યાઓ ટાળવી: CSS માં સ્ટેકીંગ કોન્ટેક્સ્ટ્સનું સંચાલન કરવું કુખ્યાત રીતે મુશ્કેલ હોઈ શકે છે. પોર્ટલ્સ તમને એલિમેન્ટ્સને સીધા DOM ના રુટમાં રેન્ડર કરવાની મંજૂરી આપીને આ સમસ્યાઓ ટાળવામાં મદદ કરે છે, ખાતરી કરો કે તેઓ હંમેશા પૃષ્ઠ પરના અન્ય એલિમેન્ટ્સની સાપેક્ષમાં યોગ્ય રીતે સ્થિત છે.

રિએક્ટ પોર્ટલ્સ સાથે મોડલ્સનો અમલ

મોડલ્સ એ એક સામાન્ય UI પેટર્ન છે જેનો ઉપયોગ મહત્વપૂર્ણ માહિતી પ્રદર્શિત કરવા અથવા વપરાશકર્તાઓને ઇનપુટ માટે પ્રોમ્પ્ટ કરવા માટે થાય છે. ચાલો જોઈએ કે રિએક્ટ પોર્ટલ્સનો ઉપયોગ કરીને મોડલ કેવી રીતે બનાવવું.

૧. પોર્ટલ રુટ બનાવવું

સૌ પ્રથમ, તમારે એક DOM નોડ બનાવવાની જરૂર છે જ્યાં મોડલ રેન્ડર કરવામાં આવશે. આ સામાન્ય રીતે તમારી HTML ફાઇલમાં (સામાન્ય રીતે body માં) એક ચોક્કસ ID સાથે div એલિમેન્ટ ઉમેરીને કરવામાં આવે છે:

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

૨. મોડલ કમ્પોનન્ટ બનાવવું

આગળ, એક રિએક્ટ કમ્પોનન્ટ બનાવો જે મોડલનું પ્રતિનિધિત્વ કરે છે. આ કમ્પોનન્ટમાં મોડલની સામગ્રી અને લોજિક હશે.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

સમજૂતી:

• isOpen prop: મોડલ દૃશ્યમાન છે કે નહીં તે નક્કી કરે છે.
• onClose prop: મોડલ બંધ કરવા માટેનું એક ફંક્શન.
• children prop: મોડલની અંદર પ્રદર્શિત થનારી સામગ્રી.
• modalRoot ref: તે DOM નોડનો સંદર્ભ આપે છે જ્યાં મોડલ રેન્ડર થશે (#modal-root).
• useEffect hook: ખાતરી કરે છે કે કમ્પોનન્ટ માઉન્ટ થયા પછી જ મોડલ રેન્ડર થાય છે જેથી પોર્ટલ રુટ તરત જ ઉપલબ્ધ ન હોવાની સમસ્યાઓ ટાળી શકાય.
• ReactDOM.createPortal: રિએક્ટ પોર્ટલ્સનો ઉપયોગ કરવાની આ ચાવી છે. તે બે આર્ગ્યુમેન્ટ્સ લે છે: રેન્ડર કરવા માટેનો રિએક્ટ એલિમેન્ટ (modalContent) અને તે DOM નોડ જ્યાં તેને રેન્ડર કરવું જોઈએ (modalRoot.current).
• ઓવરલે પર ક્લિક કરવું: મોડલ બંધ કરે છે. અમે modal-content div પર e.stopPropagation() નો ઉપયોગ કરીએ છીએ જેથી મોડલની અંદરના ક્લિક્સ તેને બંધ થતા અટકાવી શકે.

૩. મોડલ કમ્પોનન્ટનો ઉપયોગ કરવો

હવે, તમે તમારી એપ્લિકેશનમાં Modal કમ્પોનન્ટનો ઉપયોગ કરી શકો છો:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણ બતાવે છે કે isOpen prop અને openModal અને closeModal ફંક્શનનો ઉપયોગ કરીને મોડલની દૃશ્યતાને કેવી રીતે નિયંત્રિત કરવી. <Modal> ટેગ્સની અંદરની સામગ્રી મોડલની અંદર રેન્ડર થશે.

૪. મોડલને સ્ટાઇલ કરવું

મોડલને સ્થાન આપવા અને સ્ટાઇલ કરવા માટે CSS સ્ટાઇલ ઉમેરો. અહીં એક મૂળભૂત ઉદાહરણ છે:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top of other content */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

CSS ની સમજૂતી:

• position: fixed: ખાતરી કરે છે કે મોડલ સ્ક્રોલિંગને ધ્યાનમાં લીધા વિના સમગ્ર વ્યૂપોર્ટને આવરી લે છે.
• background-color: rgba(0, 0, 0, 0.5): મોડલની પાછળ અર્ધ-પારદર્શક ઓવરલે બનાવે છે.
• display: flex, justify-content: center, align-items: center: મોડલને આડું અને ઊભું કેન્દ્રમાં રાખે છે.
• z-index: 1000: ખાતરી કરે છે કે મોડલ પૃષ્ઠ પરના અન્ય તમામ એલિમેન્ટ્સની ઉપર રેન્ડર થાય છે.

૫. મોડલ્સ માટે એક્સેસિબિલિટી વિચારણાઓ

મોડલ્સનો અમલ કરતી વખતે એક્સેસિબિલિટી નિર્ણાયક છે. અહીં કેટલીક મુખ્ય વિચારણાઓ છે:

• ફોકસ મેનેજમેન્ટ: જ્યારે મોડલ ખુલે છે, ત્યારે ફોકસ આપમેળે મોડલની અંદરના એક એલિમેન્ટ પર (દા.ત., પ્રથમ ઇનપુટ ફીલ્ડ અથવા ક્લોઝ બટન) ખસેડવું જોઈએ. જ્યારે મોડલ બંધ થાય છે, ત્યારે ફોકસ તે એલિમેન્ટ પર પાછું આવવું જોઈએ જેણે મોડલ ખોલ્યું હતું. આ ઘણીવાર અગાઉ ફોકસ કરેલા એલિમેન્ટને સ્ટોર કરવા માટે રિએક્ટના useRef હૂકનો ઉપયોગ કરીને પ્રાપ્ત થાય છે.
• કીબોર્ડ નેવિગેશન: ખાતરી કરો કે વપરાશકર્તાઓ કીબોર્ડ (Tab કી) નો ઉપયોગ કરીને મોડલ નેવિગેટ કરી શકે છે. ફોકસ મોડલની અંદર ફસાયેલું હોવું જોઈએ, જેથી વપરાશકર્તાઓ આકસ્મિક રીતે તેમાંથી બહાર ટેબ ન કરી શકે. react-focus-lock જેવી લાઇબ્રેરીઓ આમાં મદદ કરી શકે છે.
• ARIA એટ્રિબ્યુટ્સ: સ્ક્રીન રીડર્સને મોડલ વિશે સિમેન્ટિક માહિતી પ્રદાન કરવા માટે ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરો. ઉદાહરણ તરીકે, મોડલ કન્ટેનર પર aria-modal="true" અને મોડલ માટે વર્ણનાત્મક લેબલ પ્રદાન કરવા માટે aria-label અથવા aria-labelledby નો ઉપયોગ કરો.
• બંધ કરવાની પદ્ધતિ: મોડલને બંધ કરવાની બહુવિધ રીતો પ્રદાન કરો, જેમ કે ક્લોઝ બટન, ઓવરલે પર ક્લિક કરવું, અથવા Escape કી દબાવવી.

ફોકસ મેનેજમેન્ટનું ઉદાહરણ (useRef નો ઉપયોગ કરીને):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- First focusable element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

ફોકસ મેનેજમેન્ટ કોડની સમજૂતી:

• previouslyFocusedElement.current: મોડલ ખોલતા પહેલા જે એલિમેન્ટ પર ફોકસ હતું તેને સ્ટોર કરે છે.
• firstFocusableElement.current: મોડલની *અંદર* પ્રથમ ફોકસ કરી શકાય તેવા એલિમેન્ટનો સંદર્ભ આપે છે (આ ઉદાહરણમાં, એક ટેક્સ્ટ ઇનપુટ).
• જ્યારે મોડલ ખુલે છે (isOpen true હોય છે):
  • વર્તમાનમાં ફોકસ થયેલ એલિમેન્ટ સ્ટોર થાય છે.
  • ફોકસ firstFocusableElement.current પર ખસેડવામાં આવે છે.
  • Escape કી સાંભળવા માટે એક ઇવેન્ટ લિસનર ઉમેરવામાં આવે છે, જે મોડલને બંધ કરે છે.
• જ્યારે મોડલ બંધ થાય છે (ક્લીનઅપ ફંક્શન):
  • Escape કી ઇવેન્ટ લિસનર દૂર કરવામાં આવે છે.
  • ફોકસ પાછું તે એલિમેન્ટ પર જાય છે જે અગાઉ ફોકસમાં હતું.

રિએક્ટ પોર્ટલ્સ સાથે ટૂલટિપ્સનો અમલ

ટૂલટિપ્સ એ નાના, માહિતીપ્રદ પોપઅપ્સ છે જે જ્યારે વપરાશકર્તા કોઈ એલિમેન્ટ પર હોવર કરે છે ત્યારે દેખાય છે. રિએક્ટ પોર્ટલ્સનો ઉપયોગ એવી ટૂલટિપ્સ બનાવવા માટે થઈ શકે છે જે પેરેન્ટ એલિમેન્ટની સ્ટાઇલિંગ અથવા લેઆઉટને ધ્યાનમાં લીધા વિના યોગ્ય રીતે સ્થિત હોય છે.

૧. પોર્ટલ રુટ બનાવવું (જો પહેલેથી બનાવેલ ન હોય તો)

જો તમે મોડલ્સ માટે પહેલેથી જ પોર્ટલ રુટ બનાવ્યું નથી, તો તમારી HTML ફાઇલમાં (સામાન્ય રીતે body માં) એક ચોક્કસ ID સાથે div એલિમેન્ટ ઉમેરો:

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

૨. ટૂલટિપ કમ્પોનન્ટ બનાવવું

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

સમજૂતી:

• text prop: ટૂલટિપમાં પ્રદર્શિત કરવા માટેનો ટેક્સ્ટ.
• children prop: તે એલિમેન્ટ જે ટૂલટિપને ટ્રિગર કરે છે (જે એલિમેન્ટ પર વપરાશકર્તા હોવર કરે છે).
• position prop: ટ્રિગર એલિમેન્ટની સાપેક્ષમાં ટૂલટિપની સ્થિતિ ('top', 'bottom', 'left', 'right'). ડિફૉલ્ટ 'top' છે.
• isVisible state: ટૂલટિપની દૃશ્યતાને નિયંત્રિત કરે છે.
• tooltipRoot ref: તે DOM નોડનો સંદર્ભ આપે છે જ્યાં ટૂલટિપ રેન્ડર થશે (#tooltip-root).
• tooltipRef ref: ટૂલટિપ એલિમેન્ટનો જ સંદર્ભ આપે છે, જેનો ઉપયોગ તેના પરિમાણોની ગણતરી કરવા માટે થાય છે.
• triggerRef ref: તે એલિમેન્ટનો સંદર્ભ આપે છે જે ટૂલટિપને ટ્રિગર કરે છે (children).
• handleMouseEnter અને handleMouseLeave: ટ્રિગર એલિમેન્ટ પર હોવર કરવા માટેના ઇવેન્ટ હેન્ડલર્સ.
• updatePosition: position prop અને ટ્રિગર અને ટૂલટિપ એલિમેન્ટ્સના પરિમાણોના આધારે ટૂલટિપની સાચી સ્થિતિની ગણતરી કરે છે. તે વ્યૂપોર્ટની સાપેક્ષમાં એલિમેન્ટ્સની સ્થિતિ અને પરિમાણો મેળવવા માટે getBoundingClientRect() નો ઉપયોગ કરે છે.
• ReactDOM.createPortal: ટૂલટિપ સામગ્રીને tooltipRoot માં રેન્ડર કરે છે.

૩. ટૂલટિપ કમ્પોનન્ટનો ઉપયોગ કરવો

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Hover over this <Tooltip text="This is a tooltip!
With multiple lines."
position="bottom">text</Tooltip> to see a tooltip.
      </p>

      <button>
        Hover <Tooltip text="Button tooltip" position="top">here</Tooltip> for tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

આ ઉદાહરણ બતાવે છે કે ટેક્સ્ટ અને બટનોમાં ટૂલટિપ્સ ઉમેરવા માટે Tooltip કમ્પોનન્ટનો ઉપયોગ કેવી રીતે કરવો. તમે text અને position props નો ઉપયોગ કરીને ટૂલટિપના ટેક્સ્ટ અને સ્થિતિને કસ્ટમાઇઝ કરી શકો છો.

૪. ટૂલટિપને સ્ટાઇલ કરવું

ટૂલટિપને સ્થાન આપવા અને સ્ટાઇલ કરવા માટે CSS સ્ટાઇલ ઉમેરો. અહીં એક મૂળભૂત ઉદાહરણ છે:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dark background */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Ensure it's on top of other content */
  white-space: pre-line; /* Respect line breaks in the text prop */
}

            

              
                Copy
              
            
          

CSS ની સમજૂતી:

• position: absolute: ટૂલટિપને tooltip-root ની સાપેક્ષમાં સ્થાન આપે છે. રિએક્ટ કમ્પોનન્ટમાં updatePosition ફંક્શન ટૂલટિપને ટ્રિગર એલિમેન્ટની નજીક સ્થાન આપવા માટે ચોક્કસ top અને left મૂલ્યોની ગણતરી કરે છે.
• background-color: rgba(0, 0, 0, 0.8): ટૂલટિપ માટે સહેજ પારદર્શક ઘેરી પૃષ્ઠભૂમિ બનાવે છે.
• white-space: pre-line: તમે text prop માં શામેલ કરી શકો તેવા લાઇન બ્રેક્સને સાચવવા માટે આ મહત્વપૂર્ણ છે. આ વિના, ટૂલટિપનો ટેક્સ્ટ બધો એક જ લાઇનમાં દેખાશે.

વૈશ્વિક વિચારણાઓ અને શ્રેષ્ઠ પદ્ધતિઓ

જ્યારે વૈશ્વિક પ્રેક્ષકો માટે રિએક્ટ એપ્લિકેશન્સ વિકસાવતા હોવ, ત્યારે આ શ્રેષ્ઠ પદ્ધતિઓ ધ્યાનમાં લો:

• આંતરરાષ્ટ્રીયકરણ (i18n): અનુવાદો અને સ્થાનિકીકરણને હેન્ડલ કરવા માટે react-i18next અથવા FormatJS જેવી લાઇબ્રેરીનો ઉપયોગ કરો. આ તમને તમારી એપ્લિકેશનને વિવિધ ભાષાઓ અને પ્રદેશોમાં સરળતાથી અનુકૂળ થવા દે છે. મોડલ્સ અને ટૂલટિપ્સ માટે, ખાતરી કરો કે ટેક્સ્ટ સામગ્રી યોગ્ય રીતે અનુવાદિત છે.
• જમણે-થી-ડાબે (RTL) સપોર્ટ: જમણેથી ડાબે વાંચવામાં આવતી ભાષાઓ (દા.ત., અરબી, હીબ્રુ) માટે, ખાતરી કરો કે તમારા મોડલ્સ અને ટૂલટિપ્સ યોગ્ય રીતે પ્રદર્શિત થાય છે. તમારે RTL લેઆઉટને સમાવવા માટે એલિમેન્ટ્સની સ્થિતિ અને સ્ટાઇલિંગને સમાયોજિત કરવાની જરૂર પડી શકે છે. CSS લોજિકલ પ્રોપર્ટીઝ (દા.ત., margin-left ને બદલે margin-inline-start) મદદરૂપ થઈ શકે છે.
• સાંસ્કૃતિક સંવેદનશીલતા: તમારા મોડલ્સ અને ટૂલટિપ્સ ડિઝાઇન કરતી વખતે સાંસ્કૃતિક તફાવતો પ્રત્યે સચેત રહો. એવી છબીઓ અથવા પ્રતીકોનો ઉપયોગ કરવાનું ટાળો જે અમુક સંસ્કૃતિઓમાં અપમાનજનક અથવા અયોગ્ય હોઈ શકે.
• સમય ઝોન અને તારીખ ફોર્મેટ્સ: જો તમારા મોડલ્સ અથવા ટૂલટિપ્સ તારીખો અથવા સમય પ્રદર્શિત કરે છે, તો ખાતરી કરો કે તે વપરાશકર્તાના સ્થાન અને સમય ઝોન અનુસાર ફોર્મેટ થયેલ છે. moment.js (જ્યારે લેગસી છે, છતાં વ્યાપકપણે ઉપયોગમાં લેવાય છે) અથવા date-fns જેવી લાઇબ્રેરીઓ આમાં મદદ કરી શકે છે.
• વિવિધ ક્ષમતાઓ માટે એક્સેસિબિલિટી: તમારા મોડલ્સ અને ટૂલટિપ્સ વિકલાંગ લોકો દ્વારા ઉપયોગી છે તેની ખાતરી કરવા માટે એક્સેસિબિલિટી માર્ગદર્શિકાઓ (WCAG) નું પાલન કરો. આમાં છબીઓ માટે વૈકલ્પિક ટેક્સ્ટ પ્રદાન કરવું, પૂરતો રંગ કોન્ટ્રાસ્ટ સુનિશ્ચિત કરવો, અને કીબોર્ડ નેવિગેશન સપોર્ટ પ્રદાન કરવું શામેલ છે.

નિષ્કર્ષ

રિએક્ટ પોર્ટલ્સ લવચીક અને સુલભ યુઝર ઇન્ટરફેસ બનાવવા માટે એક શક્તિશાળી સાધન છે. તેનો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે સમજીને, તમે એવા મોડલ્સ અને ટૂલટિપ્સ બનાવી શકો છો જે વપરાશકર્તાના અનુભવને વધારે છે અને તમારી રિએક્ટ એપ્લિકેશન્સની રચના અને જાળવણીક્ષમતામાં સુધારો કરે છે. વિવિધ પ્રેક્ષકો માટે વિકાસ કરતી વખતે એક્સેસિબિલિટી અને વૈશ્વિક વિચારણાઓને પ્રાથમિકતા આપવાનું યાદ રાખો, ખાતરી કરો કે તમારી એપ્લિકેશન્સ સમાવેશી અને દરેક માટે ઉપયોગી છે.

વધુ શીખવા માટે

• રિએક્ટ પોર્ટલ્સ દસ્તાવેજીકરણ
• વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ (WCAG)
• react-i18next